<template>
  <div class="test-micro-app">
    <h2>微应用测试页面</h2>
    <p>这个页面用于测试微应用的标签页功能</p>
    
    <div class="test-buttons">
      <el-button type="primary" @click="goToApp1">跳转到应用1</el-button>
      <el-button type="success" @click="goToApp2">跳转到应用2</el-button>
      <el-button type="warning" @click="goToAbout">跳转到关于页面</el-button>
    </div>
    
    <div class="current-info">
      <h3>当前信息</h3>
      <p><strong>当前路径:</strong> {{ $route.path }}</p>
      <p><strong>当前路由名称:</strong> {{ $route.name }}</p>
      <p><strong>当前微应用:</strong> {{ currentMicroApp }}</p>
      <p><strong>标签页数量:</strong> {{ tabCount }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useTabStore } from '../store/tab'
import { getMicroAppName } from '../utils/microAppHelper'

const router = useRouter()
const tabStore = useTabStore()

const currentMicroApp = computed(() => {
  return getMicroAppName(router.currentRoute.value.path)
})

const tabCount = computed(() => {
  return tabStore.tabs.length
})

const goToApp1 = () => {
  router.push('/app1')
}

const goToApp2 = () => {
  router.push('/app2')
}

const goToAbout = () => {
  router.push('/about')
}
</script>

<style scoped>
.test-micro-app {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.test-buttons {
  margin: 20px 0;
  display: flex;
  gap: 10px;
}

.current-info {
  margin-top: 20px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 4px;
}

.current-info h3 {
  margin-top: 0;
  color: #333;
}

.current-info p {
  margin: 8px 0;
  color: #666;
}
</style> 